<template>
  <mu-flex fill id="content" direction="column">
    <div id="content-wrap">
      <mu-list @change="onItemClick">
        <mu-sub-header>基本</mu-sub-header>
        <template v-for="(value, index) in basic">
          <mu-list-item
                  class="list-item"
                  :ripple="true"
                  button
                  :key="index"
                  :value="value">
            <mu-flex class="item-content" fill>
              <span class="label">{{ value.label }}</span>
              <mu-flex fill class="value">{{ value.text }}</mu-flex>
            </mu-flex>
          </mu-list-item>
          <mu-divider class="divider"></mu-divider>
        </template>
      </mu-list>

      <mu-list @change="onItemClick">
        <mu-sub-header>隐私</mu-sub-header>
        <template v-for="(value, index) in other">
          <mu-list-item
                  class="list-item"
                  :ripple="true"
                  button
                  :key="index"
                  :value="value">
            <mu-flex class="item-content" fill>
              <span class="label">{{ value.label }}</span>
              <mu-flex fill class="value">{{ value.text }}</mu-flex>
            </mu-flex>
          </mu-list-item>
          <mu-divider class="divider"></mu-divider>
        </template>
      </mu-list>

      <mu-flex id="logout-btn-wrap" justify-content="center">
        <mu-button id="logout-btn" full-width color="error" @click="onLogoutClick">登出</mu-button>
      </mu-flex>
    </div>

    <mu-dialog :title="dialogTitle" width="80%" :open.sync="isDialogOpen">
      <mu-form ref="form" :model="form">
        <mu-form-item
                v-if="modifying.prop !== 'sex' && modifying.prop !== 'married'"
                :label="modifying.label"
                :prop="modifying.prop"
                :rules="notEmptyRules">
          <mu-text-field v-model="form[modifying.prop]" :prop="modifying.prop"></mu-text-field>
        </mu-form-item>

        <mu-form-item v-if="modifying.prop === 'sex'">
          <mu-slide-picker
                  :visible-item-count="3"
                  :slots="sexSlots"
                  @change="onSexChange"
                  :values="[form.sex]"></mu-slide-picker>
        </mu-form-item>

        <mu-form-item v-if="modifying.prop === 'married'">
          <mu-slide-picker
                  :visible-item-count="3"
                  :slots="marriedSlots"
                  @change="onMarriedChange"
                  :values="[form.married]"></mu-slide-picker>
        </mu-form-item>
      </mu-form>

      <mu-button slot="actions" flat color="primary" @click="onDialogClose">取消</mu-button>
      <mu-button slot="actions" flat color="primary" @click="onDialogConfirm">确定</mu-button>
    </mu-dialog>

  </mu-flex>
</template>

<script lang="ts">
  export default {
    data() {
      return {
        basic: [
          {
            prop: "nickname",
            label: "姓名",
            text: "明晨"
          },
          {
            prop: "sex",
            label: "性别",
            text: "女"
          },
          {
            prop: "location",
            label: "所在地",
            text: "广东广州"
          },
          {
            prop: "education",
            label: "学历",
            text: "本科"
          },
          {
            prop: "job",
            label: "工作",
            text: "学神"
          },
        ],
        other: [
          {
            prop: "realName",
            label: "真实姓名",
            text: "陈明晨"
          },
          {
            prop: "idCardNo",
            label: "身份证号",
            text: "4418**********8310"
          },
          {
            prop: "telephone",
            label: "手机",
            text: "136****0481"
          },
          {
            prop: "married",
            label: "婚姻",
            text: "未婚"
          },
        ],
        form: {
          nickname: "",
          sex: "",
          location: "",
          education: "",
          job: "",
          realName: "",
          idCardNo: "",
          telephone: "",
          married: "",
        },
        modifying: {
          prop: "",
          label: "",
          text: ""
        },
        dialogTitle: "",
        isDialogOpen: false,
        notEmptyRules: [
          {validate: (val) => !!val, message: "不能为空"},
        ],
        sexSlots: [
          {
            width: "100%",
            textAlign: "center",
            values: ["男", "女"]
          }
        ],
        marriedSlots: [
          {
            width: "100%",
            textAlign: "center",
            values: ["未婚", "已婚"]
          }
        ],
      }
    },
    methods: {
      onItemClick(value) {
        this.form[value.prop] = value.text;

        this.modifying = value;
        this.dialogTitle = value.label;
        this.isDialogOpen = true;
      },
      onDialogClose() {
        this.isDialogOpen = false;
      },
      onDialogConfirm() {
        this.isDialogOpen = false;

        this.basic.concat(this.other).forEach(v => {
          if (v.prop === this.modifying.prop) {
            v.text = this.form[this.modifying.prop];
          }
        });
      },
      onSexChange(value) {
        this.form[this.modifying.prop] = value;
      },
      onMarriedChange(value) {
        this.form[this.modifying.prop] = value;
      },
      onLogoutClick() {
        this.$store.state.token = '';
        this.$toast.info('登出成功');
        setTimeout(() => {
          this.$router.push({name: 'Homepage'});
        }, 300);
      }
    }
  }
</script>

<style scoped>
  #content {
    flex: 1 1 0 !important;
    width: 100%;
    overflow: auto;
  }

  #content-wrap {
    width: 100%;
  }

  .item-content {
    padding: 16px 0;
  }

  .label {
    font-size: 16px;
    line-height: 1.5;
    font-weight: 500;
    flex-shrink: 0;
  }

  .value {
    margin-left: 16px;
    font-size: 16px;
    line-height: 1.5;
    font-weight: 500;
    text-align: right;
  }

  .divider {
    margin-left: 16px;
  }

  #logout-btn-wrap {
    width: 100%;
    margin-bottom: 8px;
  }

  #logout-btn {
    width: 80%;
  }
</style>

<style>
  .list-item div {
    height: 100%;
  }
</style>